<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>二级菜单-咖啡子菜单</title>
  <style>
    /* 一级菜单容器：横向排列、居中 */
    .menu-level1 {
      list-style: none; /* 清除默认列表样式（圆点） */
      padding: 0;
      margin: 0;
      display: flex; /* 让菜单项横向排列 */
      justify-content: center; /* 整体居中 */
      margin-top: 50px; /* 离顶部稍远，方便查看 */
    }

    /* 一级菜单项：基础样式与定位 */
    .menu-level1 > li {
      padding: 10px 20px;
      cursor: pointer; /* 鼠标悬浮变手型，提示可交互 */
      position: relative; /* 为子菜单的绝对定位做父级参考 */
      font-size: 18px;
    }

    /* 二级菜单容器：默认隐藏、绝对定位 */
    .menu-level2 {
      list-style: none; /* 清除默认列表样式 */
      padding: 0;
      margin: 0;
      position: absolute; /* 相对于父级（一级菜单项）定位 */
      top: 100%; /* 子菜单在父菜单项的正下方 */
      left: 0;
      display: none; /* 默认隐藏 */
      background-color: #fff; /* 白色背景 */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影增强层次 */
      min-width: 120px; /* 保证子菜单宽度 */
    }

    /* 二级菜单项：基础样式 */
    .menu-level2 > li {
      padding: 8px 15px;
      font-size: 16px;
    }

    /*  hover 交互：鼠标悬浮在“咖啡”时，显示子菜单 */
    .has-submenu:hover .menu-level2 {
      display: block;
    }

    /*  hover 高亮：提升交互反馈 */
    .menu-level1 > li:hover {
      background-color: #eee;
    }
    .menu-level2 > li:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
<!-- 菜单结构：一级菜单包含“奶茶”“果茶”“咖啡”，咖啡下嵌套二级菜单 -->
<nav class="menu">
  <ul class="menu-level1">
    <li>奶茶</li>
    <li>果茶</li>
    <li class="has-submenu">
      咖啡
      <ul class="menu-level2">
        <li>美式咖啡</li>
        <li>拿铁咖啡</li>
        <li>摩卡咖啡</li>
      </ul>
    </li>
  </ul>
</nav>
</body>
</html>